<template>
    <div class="parent-box">
        <div class="tab">
            <div class="header" style="background-color: white">
                <el-page-header @back="goBack" content="用印记录申请" style="position: relative;top: 10px;left: 5px;">
                </el-page-header>
            </div>
            <el-divider></el-divider>
        </div>
        <div class="card">
            <el-tabs type="card" v-model="tab">
                <el-tab-pane label="手动模式" name="manual">
                    <manual class="manual"></manual>
                </el-tab-pane>
                <el-tab-pane label="自动模式" name="auto">
                    <case-chose class="case-chose"></case-chose>
                </el-tab-pane>
                <el-tab-pane label="用印记录" name="history">
                    <yongyin-history :tab="tab"></yongyin-history>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
    //引入组件
    const Manual = () => import('./Manual.vue')
    const CaseChose = () => import('./CaseChose.vue')
    const YongyinHistory = () => import('./YongyinHistory.vue')

    export default {
        data() {
            return {
                tab:'manual'
            }
        },
        methods:{
            goBack(){
                history.back()
            }
        },
        components:{
            Manual,
            CaseChose,
            YongyinHistory
        }
    }
</script>

<style scoped>
    .parent-box{
        width: 100%;
    }
    .tab{
        width: 100%;
    }
    .manual{
        position: relative;
        right: 15%;
    }
    .case-chose{
        width: 100%;
    }
</style>